<template>
  <a-layout v-if="getLayoutMode() == 'topmenu'">
    <a-layout-header style="padding: 0px;z-index:99">
      <div :class="getTopStyleColor()">
        <div class="ant-pro-top-nav-header-main">
          <div class="ant-pro-top-nav-header-main-left">
            <a href="javascript://"><img src="../assets/logo.png" /><h1>后端框架</h1></a>
          </div>
          <div style="flex: 1 1 0%">
            <Menu mode="horizontal" :menu="getMenu()"></Menu>
          </div>
        </div>
      </div>
    </a-layout-header>
    <a-layout-content style="z-index:88">
      <router-view/>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout-content>
  </a-layout>
  <a-layout class="ant-pro-basicLayout" v-else-if="getLayoutMode() == 'sidemenu'">
    <a-layout-sider :class="getStyleColor()" :collapsed="getCollapsed()" width="200px" style="z-index:99">
      <div class="ant-pro-side-nav-header-main-left">
        <a href="javascript://"><img src="../assets/logo.png" /><h1>后端框架</h1></a>
      </div>
      <Menu :menu="getMenu()"></Menu>
    </a-layout-sider>
    <a-layout style="z-index:88">
      <a-layout-header style="padding: 0px;z-index:88">
        <div class="ant-pro-global-header">
          <span class="ant-pro-global-header-trigger">
            <svg-icon v-if="!getCollapsed()" iconClass="fold" className="fold" size="20px" @click="setCollapsed(true)" />
            <svg-icon v-else iconClass="unfold" className="unfold" size="20px" @click="setCollapsed(false)" />
          </span>
        </div>
      </a-layout-header>
      <a-layout-content style="z-index:77">
        <router-view/>
        <a-layout-footer style="z-index:88">Footer</a-layout-footer>
      </a-layout-content>
    </a-layout>
  </a-layout>
  <a-layout v-else-if="getLayoutMode() == 'blendmenu'">
    <a-layout-header style="padding: 0px;z-index:99">
      <div :class="getTopStyleColor()">
        <div class="ant-pro-top-nav-header-main">
          <div class="ant-pro-top-nav-header-main-left">
            <a href="javascript://"><img src="../assets/logo.png" /><h1>后端框架</h1></a>
          </div>
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider :class="getStyleColor()" width="200px" style="z-index:88">
        <Menu :menu="getMenu()"></Menu>
      </a-layout-sider>
      <a-layout style="z-index:77">
        <a-layout-content>
          <router-view/>
        </a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout>
  <SettingDrawer></SettingDrawer>
</template>
<style lang="less">
.ant-layout {
  min-height: 100%;
}
.ant-pro-basicLayout .ant-layout-header:not(.ant-pro-top-menu) {
  background: #fff;
}
.ant-pro-global-header {
  position: relative;
  height: 48px;
  padding: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.ant-pro-sider-menu-sider.light {
  background-color: white;
  box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
}
.ant-pro-top-nav-header {
  position: relative;
  width: 100%;
  height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.3s, width 0.2s;
}
.ant-pro-top-nav-header.light {
  background-color: #fff;
}
.ant-pro-top-nav-header-main{
  display:flex;
  height:100%;
  padding-left:16px;
}
.ant-pro-top-nav-header-main-left {
  display: flex;
  min-width: 192px;
  height: 100%;
  margin-right: 40px;
  img {
    height: 20px;
  }
}
.ant-pro-top-nav-header-main-left h1,.ant-pro-side-nav-header-main-left h1 {
    display: inline-block;
    margin: 0 0 0 12px;
    font-weight: 800;
    font-size: 18px;
    vertical-align: top;
}
.ant-pro-side-nav-header-main-left{
  height: 48px;
  display: flex;
  align-items: center;
  margin-left: 20px;
  img {
    height: 20px;
  }
}
.dark .ant-pro-top-nav-header-main-left h1,
.dark .ant-pro-side-nav-header-main-left h1{
  color: #fff;
}
.ant-pro-global-header-trigger{
  height: 100%;
  cursor: pointer;
  display:inline-block;
  width: 50px;
  text-align: center;
}
.ant-layout-sider-collapsed{
  .ant-pro-side-nav-header-main-left{
      img{
        width: 50px;
      }
      h1{
        display: none;
      }
  }
}

</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import SettingDrawer from "@/components/SettingDrawer.vue";
import PageView from "../components/PageView.vue";
import Menu from "../components/Menu.vue";
import { RouteRecordRaw } from 'vue-router';
import RouterConfig from "../config/router.config";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DashboardOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  FormOutlined,
  UnorderedListOutlined,
  TableOutlined,
  BugOutlined,
  AlertOutlined,
} from "@ant-design/icons-vue";

@Options({
  components: {
    SettingDrawer,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
    DashboardOutlined,
    FormOutlined,
    UnorderedListOutlined,
    TableOutlined,
    BugOutlined,
    AlertOutlined,
    PageView,
    Menu
  },
})
export default class BasicLayout extends Vue {
  public title:string = "表单";
  public content:string = "表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。";

  public getMenu(): Array<RouteRecordRaw>{
    return new RouterConfig().getRouter();
  }

  public getLayoutMode(): String {
    return (this as any).$store.getters.layoutMode;
  }

  public ggg():boolean{
    return false;
  }

  public getStyleColor(): String {
    if ((this as any).$store.getters.styleColor === "dark") {
      return "ant-layout-sider ant-layout-sider-dark ant-pro-sider-menu-sider dark ant-pro-sider-menu";
    } else {
      return "ant-layout-sider ant-layout-sider-light ant-pro-sider-menu-sider light ant-pro-sider-menu";
    }
  }

  public getTopStyleColor(): string {
    if ((this as any).$store.getters.styleColor === "dark") {
      return "ant-pro-top-nav-header dark";
    } else {
      return "ant-pro-top-nav-header light";
    }
  }

  public getMenuTheme(): string {
    if ((this as any).$store.getters.styleColor === "dark") {
      return "dark";
    } else {
      return "light";
    }
  }

  public getCollapsed():boolean{
    return (this as any).$store.getters.menuCollapsed;
  }

  public setCollapsed(state:boolean):void{
    (this as any).$store.dispatch('menuCollapsed', state);
  }
}
</script>
